<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-31 10:35:50
 * @LastEditTime: 2023-02-16 10:11:47
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 合同历史
 * @Motto: Write the code. Change the world.
-->
<template>
  <section class="contract-history">
    <a-table
      :dataSource="dataList"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      rowKey="id"
      @change="handleTableChange"
      :scroll="{ x: 'max-content' }"
    >
      <template #title>
        <span class="ml-10">合同历史</span>
      </template>
      <template #expandedRowRender />
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'operate_content'">
          <a-row justify="space-between" align="middle" style="width: 100%">
            <a-col style="width: 75%">
              <div>{{ record.operate_content.content }}</div>
              <div v-if="record.operate_content.contentArr">
                <div
                  v-for="(item, index) in record.operate_content.contentArr"
                  :key="index"
                >
                  <div v-if="index <= record.indexNum">【 {{ item }}】</div>
                </div>
              </div>
              <div v-if="record.operate_content.changeData">
                <div
                  v-for="(item, index) in record.operate_content.changeData"
                  :key="index"
                >
                  <div v-if="index <= record.indexNum">【 {{ item }}】</div>
                </div>
              </div>
            </a-col>
            <a-col
              style="width: 20%"
              v-if="
                (record.operate_content.contentArr &&
                  record.operate_content.contentArr.length > 3) ||
                (record.operate_content.changeData &&
                  record.operate_content.changeData.length > 3)
              "
            >
              <div
                @click="
                  iconClick(
                    record,
                    (record.operate_content.contentArr &&
                      record.operate_content.contentArr.length) ||
                      (record.operate_content.changeData &&
                        record.operate_content.changeData.length)
                  )
                "
              >
                <PlusSquareOutlined class="icon" v-if="record.iconType" />
                <MinusSquareOutlined class="icon" v-else />
              </div>
            </a-col>
          </a-row>
        </template>
        <template v-if="column.key === 'action'">
          <a-space v-if="record.operate && record.operate.length">
            <a-button
              v-if="record.operate.includes('APPROVE')"
              type="link"
              @click="checkApprove(record)"
              v-permission="['contractList', 'auth', 'approveDetail']"
            >
              查看审批
            </a-button>
            <a-button
              v-if="record.operate.includes('LOOK_NEW')"
              type="link"
              @click="toContractDetail(record, true)"
              v-permission="['contractList', 'auth', 'approveDetail']"
            >
              查看新合同
            </a-button>
            <a-button
              v-if="record.operate.includes('LOOK_ORIGINAL')"
              type="link"
              @click="toContractDetail(record)"
              v-permission="['contractList', 'auth', 'approveDetail']"
            >
              查看原合同
            </a-button>
          </a-space>
          <span v-else> -- </span>
        </template>
      </template>
    </a-table>
  </section>
</template>

<script>
import { defineComponent, ref, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import request from "../../../common/utils/request";
import store from "../../../store";
import { PlusSquareOutlined, MinusSquareOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "ContractDetailHistory",
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    showType: {
      type: String,
      default: "",
    },
    drawerId: {
      type: [Number, String],
      default: "",
    },
  },
  components: { PlusSquareOutlined, MinusSquareOutlined },
  setup(props, context) {
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getTableData();
    };
    const dataList = ref([]);
    const getTableData = () => {
      loading.value = false;
      request
        .get("/org", "/contract/operateLogList", {
          page: page.value,
          limit: limit.value,
          log_type: "log",
          contract_id: store.getters.contractDetail.id,
        })
        .then((res) => {
          loaded = true;
          res.data.forEach((item) => {
            item.iconType = true;
            item.indexNum = 2;
          });
          dataList.value = res.data;
          total.value = res.total;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    const $router = useRouter();
    const $route = useRoute();
    const checkApprove = (record) => {
      let contractId = store.getters.contractDetail.id;
      if (
        record &&
        record.operate_content &&
        record.operate_content.new_contract_id
      ) {
        contractId = record.operate_content.new_contract_id;
      }
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_contractApproval_${contractId}_${record.approve_id}`,
            app: 'org',
            name: `合同审批`,
            url: `/contract/contractApproval?contractId=${contractId}&approveId=${record.approve_id}&noBack=1`,
          }
        })
      } else {
        $router.push({
          name: "contractApproval",
          query: {
            contractId,
            approveId: record.approve_id,
          },
        });
      }
    };

    // 查看新/原合同
    const toContractDetail = (record, newContract = false) => {
      let id = 0;
      if (newContract) {
        // newContract == true 查看新合同 续租(continue)取new_contract_id  变更(change)取contract_id
        if (record && record.operate_content) {
          id =
            record.operate_type == "continue"
              ? record.operate_content.new_contract_id
              : record.operate_content.contract_id;
        }
      } else {
        // 查看原合同
        if (
          record &&
          record.operate_content &&
          record.operate_content.original_id
        ) {
          id = record.operate_content.original_id;
        }
      }
      if (window.__MICRO_APP_ENVIRONMENT__) {
        window.microApp.forceDispatch({
          type: "SetMicroPages",
          microInfo: {
            microId: `org_contractDetail_${id}`,
            app: 'org',
            name: `合同详情`,
            url: `/contract/contractDetail?id=${id}&noBack=1`,
          }
        })
      } else {
        $router.push({
          name: "contractDetail",
          query: { id },
        });
      }
    };

    const iconClick = (record, index) => {
      record.iconType = !record.iconType;
      if (record.iconType) {
        record.indexNum = 2;
      } else {
        record.indexNum = index;
      }
    };

    watch(
      () => $route.query.id,
      (oldVal, newVal) => {
        if (oldVal != newVal) {
          loaded = false;
        }
      }
    );

    watch(
      () => props.drawerId,
      (oldVal, newVal) => {
        if (oldVal != newVal && props.showType === "drawer") {
          loaded = false;
        }
      }
    );

    let loaded = false;

    watch(
      () => props.active,
      (val) => {
        if (val && !loaded) {
          getTableData();
        }
      }
    );

    return {
      columns,
      pagination,
      dataList,
      loading,
      //   optMap,
      handleTableChange,
      checkApprove,
      toContractDetail,

      iconClick,
    };
  },
});
const columns = [
  {
    title: "操作人",
    dataIndex: "operate_user",
  },
  {
    title: "操作时间",
    dataIndex: "operate_time",
  },
  {
    title: "操作",
    dataIndex: "operate_type_txt",
  },
  {
    title: "操作内容",
    width: 600,
    dataIndex: "operate_content",
    key: "operate_content",
  },
  {
    title: "其他",
    dataIndex: "id",
    key: "action",
  },
];

// const optMap = {
//   create: "新建",
//   edit: "编辑",
//   delete: "删除",
//   // remark: "合同备注",
//   // log: "操作日志",
//   // void: "作废合同",
// };
</script>

<style lang="less" scoped>
.icon {
  font-size: 20px;
  cursor: pointer;
}
</style>
